<template>
  <div class="update">
    <div class="left">
      <div
        class="remind"
        @click="remindConfig"
        v-auth="'CONFIG_REMIND'"
      >
        <span>配置提醒</span>
        <span
          class="open"
          v-show="formData.enable == 1"
        >已开启</span>
        <span
          class="open"
          v-show="formData.enable != 1"
        >已关闭</span>
      </div>
    </div>
    <div class="right">
      <el-button
        class="btn"
        :disabled="custList.length == 0"
        @click="allot"
        v-auth="'BATCH_ASSIGN_STA'"
      >批量分配</el-button>
      <el-button
        class="btn"
        @click="exportExcel"
        :disabled="custList.length == 0"
        v-auth="'EXP_STA'"
      > 导出Excel </el-button>
    </div>
  </div>
  <Dialog
    ref="dialogRef"
    :appDialog="appDialog"
    class="dialogForm"
  >
    <div
      class="inform"
      v-show="isAllot"
    >
      <div class="inform_icon"></div>
      <div class="inform_text">开启通知后, 选择的【成员】将会在企业微信中收到提醒通知, 同时也会在后台收到提醒通知。</div>
    </div>
    <div
      class="formData"
      v-show="!isProgress"
    >
      <el-form
        label-width="100px"
        :model="formData"
      >
        <el-form-item
          label="开通通知提醒:"
          v-show="isAllot"
        >
          <div class="switch">
            <el-switch
              v-model="formData.enable"
              class="mb-2"
              :active-value="1"
              :inactive-value="0"
            />
            <span
              v-show="formData.enable == 1"
              class="text"
            >已开启</span>
            <span
              v-show="formData.enable !=1"
              class="text"
            >已关闭</span>
          </div>
        </el-form-item>
        <el-form-item :label="label">
          <Member
            ref="member"
            @submit="getDepart"
            :type="1"
          ></Member>
        </el-form-item>
        <el-form-item :label="radioLabel">
          <el-radio-group
            v-model="formData.type"
            v-show="isAllot"
          >
            <el-radio :label="1">每次通知</el-radio>
            <el-radio :label="2">
              <div class="radio_text">
                每天通知一次<span class="text2">(每天早上9点推送昨日汇总)</span>

                <el-popover
                  trigger="hover"
                  placement="top"
                  :width="380"
                  popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
                >
                  <template #reference>
                    <div class="radio_bg"></div>
                  </template>
                  <template #default>
                    <div>当员工删除了客户时, 被设置收到提醒的员工会在企业微信上接收到客易达的提醒。</div>
                    <div :style="imgList">
                      <img
                        :style="imgItem"
                        src="@/assets/image/delete/5.png"
                        alt=""
                      />
                      <img
                        :style="imgItem"
                        src="@/assets/image/delete/6.png"
                        alt=""
                      />
                    </div>
                  </template>
                </el-popover>
              </div>
            </el-radio>
          </el-radio-group>
          <el-radio-group
            v-model="formData.allot"
            v-show="!isAllot"
          >
            <el-radio :label="2">随机分配</el-radio>
            <el-radio :label="1">平均分配</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>

    <el-progress
      style="margin: 30px 0"
      v-show="isProgress"
      color="#FF6B00"
      :text-inside="true"
      :stroke-width="22"
      :percentage="percentage"
      status="warning"
    />
  </Dialog>
</template>

<script setup lang="ts">
import Dialog from './Dialog.vue'
import Member from './Member.vue'
import { getSetionId } from '@/utils/utils'
import { useStore } from '@/store'
import bus from '@/utils/bus'
import { setAlert, getConfigAlert } from '@/api/employe/staffsupervision/deletrecord'
import { ref, reactive, defineEmits, onBeforeUnmount, watch } from 'vue'
import { ElMessage } from 'element-plus'

const member = ref()
const isAllot = ref(true)
const isProgress = ref(false)
const label = ref('通知接收成员:')
const radioLabel = ref('设置通知频率:')
const creators = ref()
const isChangeData = ref(1)
const percentage = ref(0)
const alert_user = ref([])
const emit = defineEmits(['batchAllot', 'exportData'])
const props = defineProps(['custList', 'submit2'])
const store = useStore()
let formData = ref({
  enable: 0,
  type: 1,
  allot: 1
})

const getConfigAlert2 = async (val: boolean) => {
  const res = await getConfigAlert()
  formData.value.enable = res.is_enable
  formData.value.type = res.alert_type
  alert_user.value = res.alert_user
  member.value.selectedMember = []

  if (val) {
    res.alert_user.map((item: any) => {
      item.work_user.type = 'user'
      item.work_user.check = true
      member.value.selectedMember.push(item.work_user)
    })
  }
}
// 配置提醒
const remindConfig = () => {
  appDialog.visible = true
  isChangeData.value = 1
  // member.value.getDepartList()
  appDialog.title = '通知提醒设置'
  getConfigAlert2(true)
}
getConfigAlert2(false)
const getDepart = (res: any) => {
  creators.value = res.value
}
// 弹框取消按钮
const cancelHandel = () => {
  percentage.value = 0
  appDialog.visible = false
  member.value.isUpload = true
  isChangeData.value = false
  member.value.cancelHandel()
  setTimeout(() => {
    isProgress.value = false
    isAllot.value = true
  }, 200)
}
// 弹框确认按钮
const submitHandel = () => {
  creators.value = member.value.submitHandel()
  appDialog.visible = false
  if (isAllot.value) {
    const params = {
      alert_id: '',
      is_enable: formData.value.enable,
      alert_type: formData.value.type,
      work_user_ids: getSetionId('id', creators.value)
    }
    if (member.value.length != 0) {
      params.alert_id = ''
      params.work_user_ids = getSetionId('id', creators.value)
      setAlert(params)
        .then((res: any) => {
          ElMessage.success('更新配置提醒成功')
          cancelHandel()
        })
        .catch((e: any) => {
          cancelHandel()
        })
    } else {
      setAlert(params)
        .then((res: any) => {
          ElMessage.success('更新配置提醒成功')
          cancelHandel()
        })
        .catch((e: any) => {
          cancelHandel()
        })
    }
  } else {
    if (isProgress.value) {
      emit('submit2')
      cancelHandel()
    } else {
      const userList = getSetionId('id', creators.value)
      emit('batchAllot', userList, formData.value.allot)
      cancelHandel()
    }
  }
}
// 批量分配
const allot = () => {
  label.value = '选择员工:'
  radioLabel.value = '分配方式:'
  isAllot.value = false
  appDialog.visible = true
  appDialog.title = '批量分配'
  member.value.selectedMember = []
  member.value.departVisble = true
}
bus.on('allot', allot)

// 导出Excel
const exportExcel = () => {
  isProgress.value = true
  isAllot.value = false
  appDialog.visible = true
  appDialog.title = '导出EXCEL'
  emit('exportData')
}
// 弹框配置
const appDialog = reactive({
  visible: false,
  title: '通知提醒设置',
  width: '800px',
  cancel: cancelHandel,
  submit: submitHandel,
  cancelText: '取消',
  submitText: '保存',
  isInit: false, //是否重置
  isChooseDisabled: false, //重新打开传递进来的数据是否重置
  chooseArr: [] // 传递进来选中的数据
})
defineExpose({
  cancelHandel,
  percentage,
  alert_user
})
const imgList = {
  display: 'flex',
  ['align-items']: 'center',
  ['justify-content']: 'space-between'
}
const imgItem = {
  width: '180px'
}
onBeforeUnmount(() => {
  bus.off('allot', allot)
})
</script>

<style scoped lang="scss">
.update {
  height: 56px;
  padding: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #f9f9f9;
  margin: 7px 0 22px;
  .left {
    display: flex;
    align-items: center;
    .checkAll {
      padding: 0px 12px;
      background: #f9f9f9;
      border-radius: 1px;
      border: 1px solid #eaeaea;
      box-sizing: border-box;
    }
    .remind {
      font-size: 13px;
      color: #33302d;
      margin-left: 16px;
      padding: 10px 12px;
      box-sizing: border-box;
      background: #f9f9f9;
      border-radius: 1px;
      border: 1px solid #eaeaea;
      cursor: pointer;
      .open {
        padding-left: 8px;
        color: #3e82f9;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    margin-right: 24px;
    .btn {
      // padding: 11px 12px;
      font-size: 13px;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #ff6b00;
      color: #ff6b00;
      // cursor: pointer;
      &:nth-child(1) {
        // margin-right: 20px;
      }
    }
  }
}
.inform {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  background: #e6f7ff;
  border-radius: 2px;
  border: 1px solid #91d5ff;
  &_icon {
    width: 15px;
    height: 15px;
    margin-right: 3px;
    background: url('@/assets/image/delete/close.png') no-repeat center/100%;
  }
}
.formData {
  .switch {
    display: flex;
    align-items: center;
    .text {
      margin-left: 7px;
    }
  }
  .radio_text {
    display: flex;
    align-items: center;
    .text2 {
      color: rgb(127, 127, 127);
    }
    .radio_bg {
      width: 16px;
      height: 16px;
      margin-left: 5px;
      background: url('@/assets/image/delete/close.png') no-repeat center/100%;
    }
  }
}
</style>
